import React from 'react';
import {Link} from 'react-router-dom';
import {Table, Divider, Popover, Popconfirm} from 'antd';
import cssModules from 'react-css-modules';
import styles from './style.less';
import classnames from 'classnames';
import {random6} from 'util/tool';
import {toJS} from 'mobx';
import {inject, observer} from 'mobx-react';

@inject('HouseholdStore', 'HouseholdAddUnitStore')
@observer
@cssModules(styles)
class DataTable extends React.Component {
  createColumns() {
    const {onDelete, onPush} = this.props.HouseholdStore;
    const {onEdit} = this.props.HouseholdAddUnitStore;

    const columns = [
      {
        title: '单元数',
        dataIndex: 'unit',
        align: 'center',
      },
      {
        title: '门禁密码',
        dataIndex: 'doorPwd',
        align: 'center',
        render: (text, record) => {
          return <span>{text}</span>;
        },
      },
      {
        title: '是否已被推送密码',
        dataIndex: 'pushStatus',
        align: 'center',
        render: (text, record) => {
          return <span>{text ? '是' : '否'}</span>;
        },
      },
      {
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        key: 'operation',
        render: (text, record) => {
          return (
            <span>
              {!record.pushStatus && (
                <span
                  className={styles['unit-push']}
                  onClick={() => onPush(record)}>
                  <i className={classnames('iconfont icontuisong')}></i>
                  <span>推送</span>
                </span>
              )}
              <span
                style={record.pushStatus ? {paddingLeft: '62px'} : {}}
                className={styles['unit-edit']}
                onClick={() => onEdit(record)}>
                <i className={classnames('iconfont iconbianji')}></i>
                <span>编辑</span>
              </span>
              <span className={styles['unit-delete']}>
                <Popconfirm
                  title="确定删除吗?"
                  onConfirm={() => onDelete(record)}
                  okText="确定"
                  cancelText="取消">
                  <i className={classnames('iconfont iconshanchu')}></i>
                </Popconfirm>
              </span>
            </span>
          );
        },
      },
    ];

    return columns;
  }

  render() {
    const {
      remove,
      edit,
      push,
      unitData,
      unitLoading,
    } = this.props.HouseholdStore;

    return (
      <Table
        styleName={'building-table'}
        columns={this.createColumns()}
        onDelete={remove}
        onEdit={edit}
        onPush={push}
        dataSource={unitData}
        loading={unitLoading}
        pagination={true}
        rowKey={(record, index) => {
          return `${random6()}${index}`;
        }}
      />
    );
  }
}

export default DataTable;
